<template>
	<div>
		<div class="inputBox" :style="{bottom:inputHeight - 1 +'px'}">
			<input type="text" placeholder="你得说点什么.." @input="onInput" @key.enter="enterInput"
				@confirm="send" placeholder-class="input-text" :focus="focus"
				:adjust-position="false"  />
			<div class="send-btn" @tap.stop="send">确定</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			// 是否自动弹起键盘
			focus:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				// focus:false,
				inputHeight:0
			}
		},
		mounted(){
			uni.offKeyboardHeightChange(res => {
				 this.inputHeight = res.height + 44;
			})
			uni.onKeyboardHeightChange(res => {
			  console.log(res.height)
			  this.inputHeight = res.height - 44;
			})
		}
	}
</script>

<style lang="scss">
	.inputBox {
		position: relative;
		display: flex;
		width: 100vw;
		// justify-content: space-between;
		align-items: center;
		// height: 14.4vw;
		// padding-right: 6.4vw;
		padding-left: 4vw;
		padding-top: 2.13vw;
		padding-bottom: 2.13vw;
		// background: rgba(255, 255, 255, 0.1);
		background-color: pink;
		// padding: 0 6.4vw 0 4vw;
	
		input {
			// border: 2px solid #FFFFFF;
			background-color: rgba(49, 49, 49, 0.39);
			border-radius: 6.4vw;
			width: 62.93vw;
			padding: 3.73vw 6.4vw;
			display: block;
			color: #FFFFFF;
			font-size: 3.73vw;
			font-weight: 400;
			padding-left: 6.4vw;
		}
	
		.input-text {
			// color: #FFFFFF;
			// font-size: 3.73vw;
			// font-weight: 400;
	
		}
	
		.send-btn {
			color: #FFA722;
			font-size: 3.73vw;
			font-weight: 400;
			margin-left: 6.4vw;
		}
	}
</style>
